<template>
  <div class="l-from-body">
    <el-form
      :model="formData"
      :rules="rules"
      size="mini"
      ref="form"
      label-width="96px"
    >
      <el-form-item :label="$t('名称')" prop="f_Name">
        <el-input :placeholder="$t('请输入')" v-model="formData.f_Name">
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('绑定按钮')" prop="f_ModuleBtnId">
        <l-select
          :options="btnOptions"
          :placeholder="$t('请选择')"
          v-model="formData.f_ModuleBtnId"
        >
        </l-select>
      </el-form-item>
      <el-form-item :label="$t('表格ID')" prop="f_GridId">
        <el-input :placeholder="$t('请输入')" v-model="formData.f_GridId">
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('导出勾选')" prop="f_IsCheck">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="formData.f_IsCheck"
        >
        </el-switch>
      </el-form-item>

      <el-form-item v-if="formData.f_IsCheck != 1" :label="$t('接口地址')" prop="f_Url">
        <el-input :placeholder="$t('请输入')" v-model="formData.f_Url">
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
const apiModule = window.$api.system.module;
export default {
  props: {
    moduleId: String,
    moduleCode: String,
  },
  data() {
    return {
      btnOptions: [],
      formData: {
        f_Name: "",
        f_ModuleBtnId: "",
        f_GridId: "mainTable",
        f_Url: "",
        f_IsCheck: 0,
      },
      rules: {
        f_Name: [{ required: true, message: "请输入名称" }],
        f_ModuleBtnId: [{ required: true, message: "请选择按钮" }],
        f_GridId: [{ required: true, message: "请输入表格ID" }],
      },
    };
  },
  watch: {
    moduleId: {
      handler(val) {
        this.LoadButtons(val);
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async LoadButtons(val) {
      const res = await this.$awaitWraper(apiModule.getButtons(val));
      this.btnOptions = res
        .filter(
          (t) =>
            ![this.$t("新增"), this.$t("编辑"), this.$t("删除"), this.$t("详情"), this.$t("导入")].includes(t.f_FullName)
        )
        .map((t) => {
          return { label: t.f_FullName, value: t.f_EnCode };
        });
    },

    resetForm() {
      this.formData.f_Id = "";
      this.$refs.form && this.$refs.form.resetFields();
    },
    // 校验表单
    validateForm(callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          callback();
        }
      });
    },
    setForm(data) {
      this.formData = this.$deepClone(data);
    },
    getForm() {
      const formData = this.$deepClone(this.formData);
      formData.f_ModuleId = this.moduleCode;
      formData.F_BtnName = this.btnOptions.find(
        (t) => t.value == formData.f_ModuleBtnId
      ).label;
      return formData;
    },
  },
};
</script>